import React from 'react'
import PureRenderMixin from 'react-addons-pure-render-mixin'

import './style.less'

class Refresh extends React.Component {
    constructor(props, context) {
        super(props, context);
        this.shouldComponentUpdate = PureRenderMixin.shouldComponentUpdate.bind(this);
        this.state = {
            isRefresh : false
        }
    }
    render() {
        return (
            <div className="refresh" ref="wrapper">
                {
                    this.state.isRefresh === false
                    ? <span>下拉刷新... <i className="iconfont icon-arrowdown font24"/></span>
                    : <span onClick={this.loadMoreHandle.bind(this)}>松手加载... <i className="iconfont icon-arrowup font24"/></span>
                }
            </div>
        )
    }
    loadMoreHandle() {
        // 执行传输过来的
        this.props.refreshFn();
    }
    componentDidMount() {
        // 使用滚动时自动加载更多
        const refreshFn = this.props.refreshFn
        const wrapper = this.refs.wrapper
        let timeoutId
        var that = this;
        function callback() {
            const top = wrapper.getBoundingClientRect().top
            console.log("top:"+top);
            if (top > 80 && !that.state.isRefresh) {
                that.setState({
                    isRefresh : true
                })
                // alert(11111);
                window.location.reload();
            }else if(top < 70 && that.state.isRefresh){
                that.setState({
                    isRefresh : false
                })
                refreshFn();
            }
        }
        window.addEventListener('scroll', function () {
            if (this.props.isLoadingMore) {
                return
            }
            if (timeoutId) {
                clearTimeout(timeoutId)
            }
            timeoutId = setTimeout(callback, 50)
        }.bind(this), false);
    }
}

export default Refresh